<template>
	<div class="main-content">
		<ToolBar>
			<el-button style="float:left;" type="primary" icon="el-icon-plus" size="small" @click="editData(false)">添加</el-button>
			<div style="float: right">
				<el-input placeholder="请输入部门名称！" size="small" style="width: 200px" v-model="params.name" @clear="search" clearable>
				</el-input>
				<el-button @click="search" type="success" icon="el-icon-search" size="small"></el-button>
			</div>
		</ToolBar>

		<el-table :data="dataList" border highlight-current-row height="calc(100% - 55px)" row-key="id" default-expand-all
		 :tree-props="{children:'children', hasChildren:'hasChildren'}">

			<el-table-column fixed="left" type="index" label="序号" width="50px">
			</el-table-column>

			<el-table-column prop="functionName" label="部门名称" sortable width="220px" align="left">
				<template slot-scope="scope" style="max-width: 40px !important;">
					<i :class="scope.row.icon"></i>&nbsp;&nbsp;{{scope.row.shortName}}
				</template>
			</el-table-column>

			<el-table-column prop="telephone" label="部门电话" align="center" width="100px">
			</el-table-column>

			<el-table-column prop="managerName" label="部门负责人" align="left">
			</el-table-column>

			<el-table-column prop="address" label="部门地址" align="center" width="100px">
			</el-table-column>

			<el-table-column prop="remarks" label="部门简介" align="left">
			</el-table-column>


			<el-table-column label="操作" width="180" align="center">
				<template slot="header" slot-scope="scope">
					<HelpHint content=" 编辑 修改 删除 部门">操作</HelpHint>
				</template>
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" content="新增下级部门" placement="top-end">
						<el-button @click="addChild(scope.row)" type="success" icon="el-icon-plus" circle size="small"></el-button>
					</el-tooltip>
					<el-tooltip class="item" v-if="scope.row.delete == false" effect="dark" content="编辑" placement="top-end">
						<el-button @click="editData(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
					</el-tooltip>
					<el-tooltip class="item" v-if="scope.row.delete == false" effect="dark" content="删除" placement="top-end">
						<el-button @click="deleteData(scope.row.id)" type="danger" icon="el-icon-delete" circle size="small"></el-button>
					</el-tooltip>
					<el-tooltip class="item" v-else effect="dark" content="恢复" placement="top-end">
						<el-button @click="deleteData(scope.row.id)" icon="el-icon-check" circle size="small"></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-dialogDrag :title="title" height="400px" :close-on-click-modal="false" :close-on-press-escape="false"
		 :visible.sync="dialogFormVisible" size="mini">
			<el-form :model="currentData">
				<el-row>
					<el-col :span="12">
						<el-form-item label="部门名称" :label-width="formLabelWidth">
							<el-input v-model="currentData.shortName" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="图标" :label-width="formLabelWidth">
							<el-input v-model="currentData.icon" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<el-form-item label="部门全称" :label-width="formLabelWidth">
							<el-input v-model="currentData.fullName" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="0">

					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="部门负责人" :label-width="formLabelWidth">
							<el-select v-model="currentData.managerId" filterable remote reserve-keyword 
							placeholder="请输入关键词" @change="selectGet"
							 :remote-method="remoteMethod" :loading="loading">
								<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="部门电话" :label-width="formLabelWidth">
							<el-input v-model="currentData.telephone" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<el-form-item label="部门地址" :label-width="formLabelWidth">
							<el-input v-model="currentData.address" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="0">

					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="显示顺序" :label-width="formLabelWidth">
							<el-input v-model="currentData.displaySequence" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="部门简介" :label-width="formLabelWidth">
							<el-input type="textarea" v-model="currentData.remarks" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="0">

					</el-col>
				</el-row>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveData">确 定</el-button>
			</div>
		</el-dialog>


	</div>
</template>


<script>
	import ToolBar from '@/components/ToolBar.vue';
	import HelpHint from '@/components/HelpHint.vue';
	import {
		save,
		deleteById,
		findById,
		departmentTree
	} from '../../api/department';

	import {
		nameList as userNameList
	} from '../../api/user';

	export default {
		data() {
			return {
				baseTitle: "部门信息",
				title: "部门信息",
				params: {
					name: '',
				},				
				dataList: [],
				userList: [],
				loading: false,
				currentData: {},
				parentData: {},
				dialogFormVisible: false,
				dialogFormReadOnly: false,
				formLabelWidth: '120px',
			}
		},
		created: function() {

		},
		mounted: function() {
			this.loadTree();
			this.loadUser("");
		},
		methods: {
			selectGet:function(managerId) { 			
				if(managerId){
					let obj = {};
					obj = this.userList.find((item) => { 
						return item.id == managerId; //筛选出匹配数据
					});					
					this.currentData['managerName'] = obj['name'];
				}
			},
			remoteMethod: function(query) {
				this.loading = true;
				this.loadUser(query);
			},
			loadUser: function(userName) {
				userNameList({
					name: userName,
				}).then(data => {
					this.userList = data;
					this.loading = false;
				}).catch(exception => {
					this.loading = false;
				});
			},
			loadTree: function() {
				departmentTree({
					departmentName: this.params.name
				}).then(data => {
					this.dataList = data;
			
				}).catch(exception => {
			
				});
			},
			search() {
				this.loadTree();
			},
			addChild(data) {
				this.parentData = data;
				this.currentData = {};
				this.currentData["parentId"] = data["id"];
				this.currentData["displaySequence"] = data["displaySequence"] + '1';
				this.title = "新增部门 ——上级【" + data["shortName"] + "】";
				this.dialogFormVisible = true;
			},
			editData(data) {
				if (data != false) {
					this.parentData = this.getParent(this.dataList, data.parentId);
					this.currentData = JSON.parse(JSON.stringify(data));
					this.title = "编辑部门【" + data["shortName"] + "】";
				} else {
					this.parentData = null;
					this.currentData = {};
					this.currentData["parentId"] = 0;
					this.title = "新增部门";
				}
				this.dialogFormVisible = true;
			},
			saveData() {
				this.dialogFormVisible = false;
				save(this.currentData).then(res => {
					console.log(JSON.stringify(this.parentData));
					if (this.parentData) {
						if (this.parentData.children.length == 0 || !this.currentData.id) {
							this.parentData.children.push(res);
						} else {
							this.parentData.children.forEach((record, index) => {
								if (record.id == res.id) {
									for (var key in record) {
										if (key != "children") {
											record[key] = res[key];
										}
									}
								}
							});
						}
					} else {
						if (this.dataList.length == 0 || !this.currentData.id) {
							this.dataList.push(res);
						} else if (this.dataList) {
							if (res.parentId == 0) {
								this.dataList.forEach((record, index) => {
									if (record.id == res.id) {
										for (var key in record) {
											if (key != "children") {
												record[key] = res[key];
											}
										}
									}
								});
							} else {
								this.parentData = this.getParent(this.dataList, res.id);
								this.parentData.children.forEach((record, index) => {
									if (record.id == res.id) {
										for (var key in record) {
											if (key != "children") {
												record[key] = res[key];
											}
										}
									}
								});
							}
						}
					}
					this.currentData = res;
					this.$message({
						message: '保存成功!',
						type: 'success'
					});
					this.dialogFormVisible = false;
				}).catch(exception => {

				});
			},
			deleteData(id) {
				deleteById(id).then(res => {
					this.$message({
						message: '删除成功!',
						type: 'success'
					});
					this.loadTree();
				}).catch(exception => {

				});
			},
			getParent(json, nodeId) {
				if (json == undefined || json.length <= 0) {
					return null;
				}
				//1.第一层 root 深度遍历整个JSON
				for (var i = 0; i < json.length; i++) {
					var obj = json[i];
					if (obj && obj.id && obj.id == nodeId) {
						return obj;
					} else if (obj && obj.children && obj.children.length > 0) {
						obj = this.getParent(obj.children, nodeId);
						if (obj && obj.id && obj.id == nodeId) {
							return obj;
						}
					} else {
						continue;
					}
				}
				return null;
			}
		},
		components: {
			ToolBar,
			HelpHint
		}
	}
</script>
<style lang="scss">

</style>
